<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*one CSS气泡框*/
        .one {
            position: relative; width: 300px; height: 100px; border: 3px solid #09f;
        }
        .one em, .one span{
            position: absolute; top: 100px; left: 20px; display: block; border-width: 15px; border-style: solid dashed dashed;
        }
        .one em {
            border-color:#09F transparent transparent;
        }
        .one span {
            top: 96px; border-color:#FFF transparent transparent;
        }
        /*two 使用继承*/
        .two {
            position: relative; width: 300px; height: 100px; border: 3px solid #f60; background: #fff;
        }
        .two::after {
            position:absolute; bottom: -12px; left: 20px; padding: 8px; border:inherit; border-left: none; border-top: none; content:""; background: inherit; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);
        }
    </style>
</head>
<body>
<div class="one">
    <em></em><span></span>
    我是第一个对话框
</div>
<div class="two">
    我是第二个对话框
</div>
</body>
</html>
